import React, {useEffect, useState} from "react";
import CodeEditor from "@/components/CodeEditor";
import {Button, Col, Row, Space} from "antd";
import {combineInsertStatementsFromText} from "@/utils/index";

const InsertSql: React.FC = () => {
    const [code, setCode] = useState('请粘贴SQL代码');
    const [resultCode, setResultCode] = useState('');

    const handleConvert = () => {
        const result = combineInsertStatementsFromText(code);
        setResultCode(result);
    };

    useEffect(() => {
    }, []);

    return (
        <div>
            <div style={{marginBottom: 16}}>
                <Space>
                    <Button type="primary" onClick={() => {
                        handleConvert();
                    }}>转换SQL</Button>
                </Space>
            </div>
            <Row gutter={16}>
                <Col span={12}>
                    <CodeEditor
                        value={code}
                        onChange={(value) => {
                            setCode(value);
                        }}
                    />
                </Col>
                <Col span={12}>
                    <CodeEditor
                        value={resultCode}
                        onChange={(value) => {
                            setResultCode(value);
                        }}
                    />
                </Col>
            </Row>
        </div>
    );
};

export default InsertSql;
